<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link th:href="@{/erp/assets/css/bootstrap.min.css}" rel="stylesheet"/>
    <link rel="stylesheet" th:href="@{/erp/css/style.css}"/>
    <link th:href="@{/erp/assets/css/codemirror.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/erp/assets/css/ace.min.css}"/>
    <link rel="stylesheet" th:href="@{/erp/assets/css/font-awesome.min.css}"/>
    <!--[if IE 7]>
    <link rel="stylesheet" th:href="@{/erp/assets/css/font-awesome-ie7.min.css}"/>
    <![endif]-->
    <!--[if lte IE 8]>
    <link rel="stylesheet" th:href="@{/erp/assets/css/ace-ie.min.css}"/>
    <![endif]-->
    <script th:src="@{/erp/assets/js/jquery.min.js}"></script>
    <!-- <![endif]-->
    <!--[if IE]>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <![endif]-->
    <!--[if !IE]> -->
    <script type="text/javascript">
        window.jQuery || document.write("<script th:src=\"@{/erp/assets/js/jquery-2.0.3.min.js}\">" + "<" + "script>");
    </script>
    <!-- <![endif]-->
    <!--[if IE]>
    <script type="text/javascript">
        window.jQuery || document.write("<script th:src=\"@{/erp/assets/js/jquery-1.10.2.min.js}\">" + "<" + "script>");
    </script>
    <![endif]-->
    <script type="text/javascript">
        if ("ontouchend" in document) document.write("<script th:src=\"@{/erp/assets/js/jquery.mobile.custom.min.js}\">" + "<" + "script>");
    </script>
    <script th:src="@{/erp/assets/js/bootstrap.min.js}"></script>
    <script th:src="@{/erp/assets/js/typeahead-bs2.min.js}"></script>
    <!-- page specific plugin scripts -->
    <script th:src="@{/erp/assets/js/jquery.dataTables.min.js}"></script>
    <script th:src="@{/erp/assets/js/jquery.dataTables.bootstrap.js}"></script>
    <script th:src="@{/erp/assets/layer/layer.js}" type="text/javascript"></script>
    <script th:src="@{/erp/assets/laydate/laydate.js}" type="text/javascript"></script>
    <title>员工管理</title>
</head>
<body>
<div class="page-content clearfix">
    <div id="Member_Ratings">
        <div class="d_Confirm_Order_style">
            <div class="search_style">
                <form>
                    <ul class="search_content clearfix">
                        <li><label class="l_f">员工名称</label><input name="name" id="name" type="text" class="text_add"
                                                                  placeholder="输入员工名称" style=" width:180px"/></li>
                        <li><label class="l_f">部门名称</label>
                            <select class="text_add" style="margin-left:10px;" name="dId" id="dId">
                                <option value=''>请选择部门</option>
                                <option value="-1">无部门</option>
                                <span th:each="d : ${departments}">
                   <option th:text="${d.name}" th:value="${d.id}"/>
               </span>
                            </select></li>
                        <li style="width:90px;">
                            <button type="button" class="btn_search" id="select"><i class="icon-search"></i>查询</button>
                        </li>
                    </ul>
                </form>
            </div>
            <div class="border clearfix">
       <span class="l_f">
        <a href="javascript:;" id="member_add" class="btn btn-warning"><i class="icon-plus"></i>员工账号分配</a>
       </span>
            </div>
            <div class="table_menu_list">
                <table class="table table-striped table-bordered table-hover" id="sample-table">
                    <thead>
                    <tr>
                        <th hidden="hidden">id</th>
                        <th width="70px">序号</th>
                        <th width="100px">员工编号</th>
                        <th width="80px">员工姓名</a></th>
                        <th width="120px">登录帐号</th>
                        <th width="120px">职位</th>
                        <th width="130px">所属部门</th>
                        <th width="150px">员工成绩</th>
                        <th width="180px">入职时间</th>
                        <th width="100px">员工状态</th>
                        <th width="70px">账号状态</th>
                        <th width="150px">操作</th>
                        <td hidden="hidden"></td>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!--销售区域分配图层-->
<div class="add_menber" id="add_menber_style" style="display:none">
    <ul class=" page-content">
        <div class="Operate_cont clearfix">
            <label class="form-label"><span class="c-red">*</span>登录帐号：</label>
            <div class="formControls ">
                <input type="text" onchange="logisticszc(this)"   class="input-text" value="" placeholder="" id="loginAccount" name="登录帐号">
                <span></span>
            </div>
        </div>
        <div class="Operate_cont clearfix">
            <label class="form-label"><span class="c-red">*</span>初始密码：</label>
            <div class="formControls ">
                <input type="text" class="input-text" value="" placeholder="" id="password" name="初始密码">
            </div>
        </div>
        <div class="Operate_cont clearfix">
            <label class="form-label"><span class="c-red">*</span>员工姓名：</label>
            <div class="formControls ">
                <input type="text" class="input-text" value="" placeholder="" id="sname" name="员工姓名">
            </div>
        </div>
        <div class="Operate_cont clearfix">
            <label class="form-label"><span class="c-red">*</span>员工编号：</label>
            <div class="formControls ">
                <input type="text" onchange="logno(this)" class="input-text" value="" placeholder="" id="no" name="员工编号">
            </div>
        </div>
        <div class="Operate_cont clearfix">
            <label class="form-label"><span class="c-red"></span>部门职位：</label>
            <div class="formControls ">
                <select style="margin-left:10px;" id="dId1">
                    <option value=''>请选择部门</option>
                </select>
                <select style="margin-left:10px;" id="Pid">
                    <option value=''>请选择分部门</option>
                </select>
                <select style="margin-left:10px;" id="post">
                    <option value=''>请选择职位</option>
                </select>
            </div>
        </div>
        <div class="Operate_cont clearfix">
            <label class="form-label"><span class="c-red">*</span>联系电话：</label>
            <div class="formControls ">
                <input type="text" onchange="phone(this)" id="tel" maxlength="11"  class="input-text" value="" placeholder=""  name="联系电话">
                <span id="t1"></span>
            </div>
        </div>
        <div class="Operate_cont clearfix">
            <label class="form-label"><span class="c-red">*</span>入职时间：</label>
            <div class="formControls ">
                <!--<input type="text" class="input-text laydate-icon" id="entryTime" value="" placeholder="" name="入职时间">-->
                <input class="inline laydate-icon" id="entryTime" style=" margin-left:10px;" name="entryTime">
            </div>
        </div>
    </ul>
</div>
</div>
</div>
</div>
<!--编辑区域分配图层-->
<div class="edit_menber" id="edit_menber_style" style="display:none">
    <ul class=" page-content">
        <div class="Operate_cont clearfix">
            <label class="form-label"><span class="c-red">*</span>登录帐号：</label>
            <div class="formControls ">
                <input type="text" onchange="logisticszc(this)" class="input-text" value="zhangsan" placeholder="" id="loginAccount1" name="登录帐号">
            </div>
        </div>
        <div class="Operate_cont clearfix">
            <label class="form-label"><span class="c-red">*</span>员工编号：</label>
            <div class="formControls ">
                <input type="text" class="input-text" value="0142" placeholder="" id="no1" name="员工编号">
            </div>
        </div>
        <div class="Operate_cont clearfix">
            <label class="form-label"><span class="c-red"></span>部门职位：</label>
            <div class="formControls ">
                <select style="margin-left:10px;" id="dId2">
                    <option value=''>请选择部门</option>
                </select>
                <select style="margin-left:10px;" id="Pid1">
                    <option value=''>请选择分部门</option>

                </select>
                <select style="margin-left:10px;" id="post1">
                    <option value=''>请选择职位</option>
                </select>
            </div>
        </div>

        <div class="Operate_cont clearfix">
            <label class="form-label"><span class="c-red">*</span>联系电话：</label>
            <div class="formControls ">
                <input type="text" onchange="phone(this)" id="tel1" maxlength="11" class="input-text"  value="15234685432" placeholder=""  name="联系电话">
                <span id="t2"></span>
            </div>
        </div>
        <div class="Operate_cont clearfix">
            <label class="form-label"><span class="c-red"></span>入职时间：</label>
            <div class="formControls "><span style="margin-left:10px;" id="time"/>
            </div>
        </div>
        <div class="Operate_cont clearfix">
            <label class="form-label"><span class="c-red">*</span>员工状态：</label>
            <div class="formControls ">
                <select style="margin-left:10px;" id="status">
                    <option value="正式员工">正式员工</option>
                    <option value="试用期员工">试用期员工</option>
                </select>
            </div>
        </div>
        <div class="Operate_cont clearfix">
            <label class="form-label"><span class="c-red"></span>帐号状态：</label>
            <div class="formControls "><span style="margin-left:10px;" id="account"/>
            </div>
        </div>
        <div class="Operate_cont clearfix">
            <label class="form-label">员工成绩：</label>
            <div class="formControls">
                <textarea id="grade"  name="" rows="" class="textarea" placeholder="说点什么...最少输入10个字符" datatype="*10-100"
                          dragonfly="true" nullmsg="备注不能为空！" onKeyUp="textarealength(this,100)"></textarea>
                <p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
            </div>
        </div>
    </ul>
</div>
</div>
</div>
</div>
<!--添加的三个下拉框联动-->
<script type="text/javascript" th:src="@{/js/s_d_ps.js}"></script>
<script type="text/javascript" th:src="@{/js/verifystaff.js}"></script>
<script>


    /*分页模糊查询*/
    $(function () {
        var table = $('#sample-table').dataTable({
            "autoWidth": false,//当重复刷新表格时，我的页面会出现变形的，现象，加了这个就好了
            searching:false,
            serverSide: true,   //开始服务器分页
            aoColumnDefs: [
                {"orderable": false, "aTargets": [ 1, 2, 3, 4, 5,6]}// 制定列不参与排序
            ],
            ajax: {
                url : '/staff/page',
                type : 'post',
                data : function (d) {
                    var data = $('form').serialize();   //获取查询条件
                    //获取分页信息
                    var searchParams= {
                        start : d.start,
                        length : d.length,
                    };
                    data = data + '&' + $.param(searchParams);
                    return data;
                }
            },

            columns : [
                { "data": "id", "className" : "hidden" },
                { "data":"no","createdCell": function (td,cellData,rowData,row,col) {
                        $(td).empty().append(row+1);
                    } },

                { "data": "no" },
                { "data": "realName"},
                { "data": "userName"},
                /*post.name department可能为空 要判断 其中post department为对象*/
                {"data": "post", "createdCell": function (td, cellData, rowData, row, col) {
                        if (cellData == null) {
                            $(td).empty().append('<span></span>');
                        } else{
                            $(td).empty().append('<span>'+rowData.post.name+'</span>');
                        }
                    }
                },
                {"data": "department", "createdCell": function (td, cellData, rowData, row, col) {
                        if (cellData == null) {
                            $(td).empty().append('<span></span>');
                        } else{
                            $(td).empty().append('<span>'+rowData.department.name+'</span>');
                        }
                    }
                },

                { "data": "grade" },
                { "data": "entryTime" },
                { "data": "status" },

                {
                    "data": "userStatus", "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).addClass("td-status")
                        if(cellData=="1"){
                            $(td).empty().append('<span class="label label-success radius">已启用</span>');
                        }else if(cellData=="0"){
                            $(td).empty().append('<span class="label label-defaunt radius">已停用</span>');
                        }

                    }
                },

                {
                    "data": "userStatus", "createdCell": function (td, cellData, rowData, row, col) {
                        if (cellData == "1") {
                            $(td).addClass("td-manage")
                            $(td).empty().append('<a onClick="member_stop(this,\''+rowData.id+'\')" href="javascript:;" title="停用" class="btn btn-xs btn-success"><i class="icon-ok bigger-120"></i></a>' +
                                ' <a title="编辑" class="btn btn-xs btn-info property_edit"><i class="icon-edit bigger-120"></i></a>');
                        } else if (cellData == "0") {
                            $(td).addClass("td-manage")
                            $(td).empty().append('<a style="text-decoration:none" class="btn btn-xs " onClick="member_start(this,\''+rowData.id+'\')" href="javascript:;" title="启用"><i class="icon-ok bigger-120"></i></a> <a title="编辑" class="btn btn-xs btn-info property_edit"  ><i class="icon-edit bigger-120"></i></a>');
                        }
                    }
                },
            ]
        } );


        //搜索按钮事件
        $('#select').click(function () {
            table.fnUpdate();
        })

    })







    /*区域分配-添加*/
    $('#member_add').on('click', function () {
        layer.open({
            type: 1,
            title: '员工账号分配',
            maxmin: true,
            shadeClose: true, //点击遮罩关闭层
            area: ['700px', '600px'],
            content: $('#add_menber_style'),
            btn: ['提交', '取消'],
            yes: function (index, layero) {
                var num = 0;
                var str = "";

                $(".add_menber input[type$='text']").each(function (n) {

                    if ($(this).val() == "") {
                        layer.alert(str += "" + $(this).attr("name") + "不能为空！\r\n", {
                            title: '提示框',
                            icon: 0,
                        });
                        num++;
                        return false;
                    }

                });

                if (num > 0) {
                    return false;
                } else {

                    var data={};
                    data.userName = $("#loginAccount").val();
                    data.passWord = $("#password").val();
                    data.realName =$("#sname").val();
                    data.no =$("#no").val();
                    data.dId =$("#Pid").val();
                    data.pId =$("#post").val();
                    data.userTel =$("#tel").val();
                   /* data.entryTime =new Date($("#entryTime").val());*/
                    data.entryTime =$("#entryTime").val();
                    data.userStatus='1'
                    data.status="试用期员工"
                    $.ajax({
                        url: '/staff/add',
                        type: 'post',
                        dataType: 'json',
                        data: JSON.stringify(data),
                        contentType: 'application/json; charset=utf-8',
                        success: function (data) {
                            if(data.rs){
                                layer.alert('分配成功！', {
                                    title: '提示框',
                                    icon: 1,
                                });
                                layer.close(index);
                                window.parent.document.getElementById('iframe').contentWindow.location.reload(true);

                            }else{
                                layer.msg(data.msg,{icon:2,time:2000});
                            }

                        }
                    });

                }
            }
        });
    });

        $.ajax({
            url:'[[@{/staff/parentDepartments}]]',
            success:function (data) {
                if(data.rs){
                    var data=data.data
                for (var i in data) {
                    $('#dId2:last').append("<option value="+data[i].id+">"+data[i].name+"</option>")
                }

            }else{
                layer.msg(data.msg,{icon:2,time:2000})
            }
            }
        })



    $('#dId2').bind("change",function () {
        $('#Pid1 option').not(":first").remove();

        $.ajax({
            async : 'false',
            url: '[[@{/staff/sonDepartments}]]',
            data:{
                dId:$("#dId2").val()
            },
            success:function (data) {
                if(data.rs){
                    var data=data.data
                $('#Pid1').empty();
                $('#Pid1:last').append("<option value=''>"+"请选择分部门"+"</option>")
                for (var i in data) {
                    $('#Pid1:last').append("<option value="+data[i].id+">"+data[i].name+"</option>")
                }
                }else{
                    layer.msg(data.msg,{icon:2,time:2000})
                }
            }
        })
    })


    $('#Pid1').bind("change",function () {
        $('#post1 option').not(":first").remove();
        $.ajax({
            async : 'false',
            url: '[[@{/staff/posts}]]',

            data:{
                dId:$("#Pid1").val()
            },
            success:function (data) {
                if(data.rs){
                    var data=data.data
                $('#post1').empty();
                $('#post1:last').append("<option value=''>"+"请选择职位"+"</option>")
                for (var i in data) {
                    $('#post1:last').append("<option value="+data[i].id+">"+data[i].name+"</option>")
                }
                }else{
                    layer.msg(data.msg,{icon:2,time:2000})
                }
            }
        })
    })





    /*区域分配-编辑*/
    $('body').on('click','.property_edit', function () {

        var id = $(this).parent().parent().children("td:eq(0)").text();
        $.ajax({
            data:{"id":id},
            type:'post',
            dataType:'json',
            url: '/staff/find',
            success:function (dd) {
                if(dd.rs){
                    var dd=dd.data
                $("#loginAccount1").val(dd.user_name);
                $("#no1").val(dd.no);

               $('#dId2').val(dd.d2id);
                $('#Pid1').empty();
                $('<option></option>').text(dd.dname).val(dd.did).prop("selected",
                    "selected").appendTo("#Pid1");

                $('#post1').empty();
                $('<option></option>').text(dd.pname).val(dd.p_id).prop("selected",
                    "selected").appendTo("#post1");

               $("#time").html(dd.entry_time1)
                $("#account").html(dd.user_status=="1"?"已启用":"已停用");

                $("#tel1").val(dd.user_tel);
                $("#status").val(dd.status);
                $("#grade").val(dd.grade);

                }else{
                    layer.msg(dd.msg,{icon:2,time:2000})
                }

            }
        })



        layer.open({
            type: 1,
            title: '员工编辑',
            maxmin: true,
            shadeClose: false, //点击遮罩关闭层
            area: ['600px', ''],
            content: $('#edit_menber_style'),
            btn: ['保存', '取消'],
            yes: function (index, layero) {
                var num = 0;
                var str = "";
                $(".edit_menber input[type$='text']").each(function (n) {
                    if ($(this).val() == "") {

                        layer.alert(str += "" + $(this).attr("name") + "不能为空！\r\n", {
                            title: '提示框',
                            icon: 0,
                        });
                        num++;
                        return false;
                    }
                });
                if (num > 0) {
                    return false;
                } else {


                    var data={};
                    data.id=id;
                    data.userName = $("#loginAccount1").val();
                    data.no =$("#no1").val();

                    data.dId =$("#Pid1").val();
                    data.pId =$("#post1").val();
                    data.userTel =$("#tel1").val();
                    data.status=$("#status").val();
                    data.grade=$("#grade").val();


                    $.ajax({
                        url: '/staff/update',
                        type: 'post',
                        dataType: 'json',
                        data: JSON.stringify(data),
                        contentType: 'application/json; charset=utf-8',
                        success: function (data) {
                            if(data.rs){
                                layer.alert('分配成功！', {
                                    title: '提示框',
                                    icon: 1,
                                });
                                layer.close(index);
                                window.parent.document.getElementById('iframe').contentWindow.location.reload(true);

                            }else{
                                layer.msg(data.msg,{icon:2,time:2000});
                            }
                        }
                    });

                }
            }
        });
    });



    /*用户-停用*/
    function member_stop(obj, id) {
        layer.confirm('确认要停用吗？', function (index) {
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs " onClick="member_start(this,\'' + id + '\')" href="javascript:;" title="启用"><i class="icon-ok bigger-120"></i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已停用</span>');
            $(obj).remove();

            $.ajax({
                url: '/staff/updateStatus',
                data: {
                    id: id,
                    status: "已停用",
                },
                success: function (data) {
                    if(data.rs){
                    layer.msg('已停用!', {icon: 5, time: 1000});
                    }else{
                        layer.msg(data.msg,{icon:2,time:2000});
                    }
                }
            });
        });
    }

    /*用户-启用*/
    function member_start(obj, id) {
        layer.confirm('确认要启用吗？', function (index) {
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs btn-success" onClick="member_stop(this,\'' + id + '\')" href="javascript:;" title="停用"><i class="icon-ok bigger-120"></i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
            $(obj).remove();
            $.ajax({
                url: '/staff/updateStatus',
                data: {
                    id: id,
                    status: "已启用",
                },
                success: function (data) {
                    if(data.rs){
                    layer.msg('已启用!', {icon: 6, time: 1000});
                    }else{
                        layer.msg(data.msg,{icon:2,time:2000});
                    }
                }
            });
        });
    }

    /*时间按钮*/
    laydate.render({
        elem: '#entryTime',
        type: 'datetime'
    });



</script>
</body>
</html>